<!-- 装修组件 -->
<template>
	<view class="me-page-design">
		<!-- 左上角返回按钮 -->
		<image v-if="res.show_back" class="design-back" :src="res.btn_back" mode="scaleToFill" @click.stop="back"></image>
		
		<!-- 状态栏 -->
		<view v-if="res.bar_auto" :style="{height:barHeight, background:res.bar_bg}"></view>
		
		<view v-for="comp in showComps" :key="comp._id">
			<!-- 图片 -->
			<view class="me-comp" v-if="comp.type==designType.img">
				<image class="image" :src="comp.src" mode="widthFix" @click="href(comp)"></image>
				<template v-if="comp.areas">
					<view v-for="area in comp.areas" :key="area._id" :style="{position: 'absolute', top: toRpx(area.top), left: toRpx(area.left), width: toRpx(area.w), height: toRpx(area.h)}" @click="href(area)"></view>
				</template>
			</view>
			
			<!-- 轮播 -->
			<view class="me-comp" v-if="comp.type==designType.swiper">
				<swiper :style="{'background': 'url('+comp.bg+')', 'background-size': 'cover', height: getSwiperHeight(comp._id)}" :indicator-dots="comp.list.length>1&&comp.dot_show" :autoplay="comp.autoplay" :indicator-color="comp.dot_color" :indicator-active-color="comp.dot_color_act" :previous-margin="comp.margin+'rpx'" :next-margin="comp.margin+'rpx'" :circular="comp.circular">
					<swiper-item v-for="val in comp.list" :key="val.src" :style="{padding: '0 '+comp.space+'rpx'}">
						<image class="image" :style="{height:'100%', 'border-radius': comp.radius+'rpx'}" :src="val.src" mode="aspectFill" @load="swiperLoad($event,val._id)" @click="href(val)"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 间隔 -->
			<view class="me-comp" v-if="comp.type==designType.line">
				<view :style="{height: comp.height+'rpx', background: comp.bg}"></view>
			</view>
			
			<!-- 视频 -->
			<view class="me-comp" v-if="comp.type==designType.video">
				<video class="video" :style="{height: comp.height+'rpx'}" :src="comp.src" :poster="comp.poster"></video>
			</view>
			
			<!-- 浮层 -->
			<view class="me-comp me-layer" v-if="comp.type==designType.layer && comp.layerShow!=false">
				<view class="me-layer-content" :class="{'layer-center': comp.center, 'layer-safe-top': comp.top, 'layer-safe-bottom': comp.bottom}" :style="{width: getLayerWidth(comp), top: getLayerTop(comp), left: getLayerLeft(comp), right: getLayerRight(comp), bottom: getLayerBottom(comp), 'z-index': comp.zIndex}">
					<image v-if="comp.src" class="image" :src="comp.src" mode="widthFix" @click="href(comp)"></image>
					<template v-if="comp.areas">
						<view v-for="area in comp.areas" :key="area._id" :style="{position: 'absolute', top: toRpx(area.top), left: toRpx(area.left), width: toRpx(area.w), height: toRpx(area.h)}">
							<view v-if="area.close" style="width: 100%;height: 100%" @click="layerClose(comp)"></view>
							<view v-else style="width: 100%;height: 100%" @click="href(area)"></view>
						</view>
					</template>
				</view>
				<view v-if="comp.shadow" class="me-layer-shadow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	const DESIGN_PAGE_WEB = "/uni_modules/app-page-design/pages/design-web" // 以webview方式打开http链接
	
	import designType from '../../common/design-type.js';
	
	export default {
		props:{
			res: { // 组件数据
				type: Object,
				default(){
					return {
						title:"", // 页面名称
						comps: [], // 组件
						version_check: false // 当前平台当前版本是否在审核中
					}
				}
			}
		},
		data() {
			return {
				designType, // 组件类型
				swiperHeight:[], // 轮播图的高度取最先加载完成的那张图片的高度
				barHeight: '20px', // 状态栏高度
				showComps: [], // 可显示的组件
				sys: {} // 系统信息
			}
		},
		watch: {
			res(val) {
				// 可展示的组件
				this.initShowComps()
				// 页面的标题 (页面默认通栏, 所以页面标题仅h5生效)
				setTimeout(()=>{
					uni.setNavigationBarTitle({
						title: val.title
					})
				},100)
			}
		},
		created() {
			this.sys = uni.getSystemInfoSync()
			this.barHeight = this.sys.statusBarHeight + 'px'
			this.initShowComps() // 可展示的组件
		},
		methods: {
			// 可展示的组件
			initShowComps(){
				if(!this.res.comps){
					this.showComps = []
					return
				}
				let comps = []
				let copyComps = JSON.parse(JSON.stringify(this.res.comps))
				for (let comp of copyComps) {
					if (comp.type == designType.swiper) {
						// 过滤轮播审核隐藏的图片
						let list = []
						for (let sw of comp.list) {
							let swHide = sw.check_show == false && this.res.version_check
							if(!swHide){
								list.push(sw)
							}
						}
						if(list.length>0){
							comp.list = list
							comps.push(comp)
						}
					}else{
						// 过滤已显示过的浮窗
						if(comp.type == designType.layer && comp.show_once){
							let ids = this.getLayerCloseIds()
							if(ids.indexOf(comp._id)!=-1) continue;
						}
						// 审核中
						let hide = comp.check_show == false && this.res.version_check
						if(!hide) comps.push(comp)
					}
				}
				this.showComps = comps
			},
			// 轮播图的高度取最先加载完成的那张图片的高度
			swiperLoad(e, _id){
				let sw = this.swiperHeight.find(val => val._id == _id);
				if (!sw) {
					let h = e.detail.height * this.sys.windowWidth / e.detail.width
					this.swiperHeight.push({_id, h: h+'px'})
				}
			},
			// 获取轮播高度
			getSwiperHeight(_id){
				let sw = this.swiperHeight.find(val => val._id == _id);
				return sw ? sw.h : '300rpx'
			},
			// 获取浮层宽度
			getLayerWidth(comp){
				return comp.width.indexOf('%')!=-1 ? comp.width : comp.width+'rpx'
			},
			// 获取浮层top值
			getLayerTop(comp){
				return comp.bottom!="" ? 'auto' : comp.top.indexOf('%')!=-1 ? comp.top : comp.top+'rpx'
			},
			// 获取浮层left值
			getLayerLeft(comp){
				return comp.right!="" ? 'auto' : comp.left.indexOf('%')!=-1 ? comp.left : comp.left+'rpx'
			},
			// 获取浮层right值
			getLayerRight(comp){
				return comp.right=="" ? 'auto' : comp.right.indexOf('%')!=-1 ? comp.right : comp.right+'rpx'
			},
			// 获取浮层bottom值
			getLayerBottom(comp){
				return comp.bottom=="" ? 'auto' : comp.bottom.indexOf('%')!=-1 ? comp.bottom : comp.bottom+'rpx'
			},
			// 获取已关闭的弹窗id数组
			getLayerCloseIds(){
				return uni.getStorageSync("LAYER_CLOSE_IDS") || []
			},
			// 添加已关闭的弹窗id
			addLayerCloseId(id){
				let ids = this.getLayerCloseIds()
				if(ids.indexOf(id)==-1){
					ids.push(id)
					uni.setStorageSync("LAYER_CLOSE_IDS", ids)
				}
			},
			// 打开页面
			href(comp){
				let url = comp.url
				if(!url) return;
				if(url.indexOf('http')==0) {
					// 以webview的方式展示网页
					uni.setStorageSync("DESIGN_PAGE_WEB_URL", url) // 通过缓存传参,避免参数过长或编码异常等问题
					uni.navigateTo({url: DESIGN_PAGE_WEB})
				} else{
					if(url.indexOf('/')!=0) url = "/" + url // 兼容不是以/开头的本地路径
					if (comp.switchTab) {
						// 打开tab页
						uni.switchTab({url})
					} else{
						// 非tab页
						uni.navigateTo({url})
					}
				}
			},
			// 关闭浮窗
			layerClose(comp){
				this.$set(comp, 'layerShow', false)
				this.addLayerCloseId(comp._id)
			},
			// 返回
			back(){
				uni.navigateBack()
			},
			// 装修页的基础宽度是375,需等比例缩放
			toRpx(num){
				if (this.res.base_width) {
					let scale = this.sys.windowWidth / this.res.base_width
					return num*scale + 'px'
				} else{
					return num + 'px'
				}
			}
		}
	}
</script>

<style lang="scss">
	.me-page-design{
		.design-back{
			z-index: 900;
			position: fixed;
			top: 20rpx;
			left: 20rpx;
			width: 80rpx;
			height: 80rpx;
			margin-top: var(--status-bar-height)
		}
		
		.me-comp{
			position: relative;
			.image{
				width: 100%;
				height: auto;
				vertical-align: bottom;
			}
			.video{
				width: 100%;
				vertical-align: bottom;
			}
			
			&.me-layer{
				position: unset;
				.me-layer-content{
					position: fixed;
					&.layer-center{
						transform: translate(-50%,-50%);
					}
					&.layer-safe-top{
						margin-top: var(--window-top);
					}
					&.layer-safe-bottom{
						margin-bottom: var(--window-bottom);
						padding-bottom: constant(safe-area-inset-bottom);
						padding-bottom: env(safe-area-inset-bottom);
					}
				}
				.me-layer-shadow{
					z-index: 500;
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,.3);
				}
			}
		}
		
	}
</style>
